import { NavBar, TabBar } from 'antd-mobile';
import { useModel } from '@@/plugin-model/useModel';
import styles from './_layout.less';
import { GIcon } from 'geminis-react-mobile';
import { useEffect, useState } from 'react';

export default (props: any) => {
  const [activeKey, setActiveKey] = useState<string>();
  const { config } = useModel('config');

  const onTabChange = (key: string) => {
    props.history.replace(key);
    setActiveKey(key);
  };

  useEffect(() => {
    config?.route.routes.forEach((tab: any) => {
      if (props.location.pathname.indexOf(tab.path) === 0) {
        setActiveKey(tab.path);
      }
    });
  }, []);

  return (
    <div className={styles.app}>
      <NavBar
        backArrow={false}
        style={{
          '--border-bottom': '1px #eee solid',
        }}
      >
        {config?.title}
      </NavBar>
      <div className={styles.body} id="geminis-app-container">
        {props.children}
      </div>
      <TabBar
        className={styles.bottom}
        onChange={onTabChange}
        activeKey={activeKey}
      >
        {config?.route.routes.map((item: any) => (
          <TabBar.Item
            key={item.path}
            title={item.name}
            icon={<GIcon type={item.icon} />}
          />
        ))}
      </TabBar>
    </div>
  );
};
